<template>
    <div>
        <el-row class="layout-page-heading">
            <el-col :span="16">
                <h3>个人信息</h3>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>个人信息</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="8">
                <div class="layout-page-heading-action">
                    <el-button onclick="router.go(-1)"><i class="fa fa-chevron-left"></i>返回</el-button>
                    <el-button type="primary" @click="save"><i class="fa fa-save"></i>保存</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="layout-page-box">
            <el-form label-width="140px" label-position="right" :model="user" :rules="rules" ref="user"
                     class="edit-form">
                <el-form-item label="姓名" class="is-required">
                    <label>{{user.user_name}}</label>
                </el-form-item>
                <el-form-item label="账号" class="is-required">
                    <label>{{user.account}}</label>
                </el-form-item>
                <el-form-item label="余额" class="is-required">
                    <label>{{user.money}}</label>
                </el-form-item>
                <el-form-item label="测试手机号码" prop="mobile">
                    <el-input type="text" v-model="user.mobile"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            var officeValidator = (rules,value,callback) => {
                var arr = this.user.office_keys
                if(arr.length == 0){
                    callback(new Error('请选择部门'))
                }else{
                    callback()
                }
            }
            var verifyPasswordValidator = (rules,value,callback) =>{
                if(this.user.password){
                    if(!value){
                        callback(new Error("请确认密码"))
                    }else if(value != this.user.password){
                        callback(new Error("两次输入密码不一致"))
                    }else{
                        callback()
                    }
                }else{
                    callback()
                }
            }
            var passwordValidator =  (rules,value,callback) => {
                if(value){
                    this.$refs['user'].validateField('verifyPassword');
                    this.verifyPasswordFlag=false
                    var reg=/^[A-Za-z0-9]+$/
                    var flag = reg.test(value)
                    if(flag == false || value.length <6 || value.length > 16){
                        callback(new Error('长度为 6 到 16 个字母或数字'))
                    }else{
                        callback()
                    }
                }else{
                    this.verifyPasswordFlag=true
                    this.user.verifyPassword=''
                    callback()
                }
            }
            return {
                user: {
                    id: '',
                    account: '',
                    user_name: '',
                    mobile: '',
                    money: 0,
                    default_voice_template: '',
                    default_sms_template: ''
                },
                roles: [],
                offices: [],
                verifyPasswordFlag:true,
                rules: {
                    nickname: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    mobile: [
                        {
                            required:true,
                            message:'请输入电话号码'
                        },
                        {
                            pattern:/^1[34578]\d{9}$/,
                            message:'请输入正确的电话号码'
                        }
                    ]
                }
            }
        },
        methods: {
            save(){
                var data = {
                    id: this.$route.query.id,
                    mobile: this.user.mobile
                };
                this.$refs.user.validate((valid)=> {
                    if (valid) {
                        api.request('api/system/user/update', data, (res)=> {
                            Lockr.set("userName",this.user.name);
                            _g.toast('success', '保存成功')
                            router.replace('/')
                            top.location.reload()
                        })
                    }
                })
            },
            init(){
                api.request('api/system/user/get', {id: Lockr.get("id")}, (res)=> {
                    this.user.account = res.data.account
                    this.user.user_name = res.data.user_name
                    this.user.mobile = res.data.mobile
                    this.user.money = res.data.money
                });
            }
        },
        created() {
            this.init()
        }
    }
</script>
<style>
    .verifyPasswordFlag{
        display:none
    }
</style>
<style scoped>


</style>